/*
* @Date: 2021/3/4
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import VerticalDivider from 'components/VerticalDivider';
import { Tabs } from 'antd';
import Viewer from './Viewer';
import Style from './Style';

const TabPane = Tabs.TabPane;

export default class extends React.Component {
  render() {
    const { propsValue, component = '', componentId, sourceData } = this.state;
    return (
      <div className="form-designer-box">
        <Viewer onViewSource={this.onViewSource} dataSource={sourceData}/>
        <VerticalDivider style={{width: 3, background: '#454545'}} />
        <Tabs type="card">
          <TabPane tab="组件" key="components">

          </TabPane>
          <TabPane tab="标签" key="html">
            <p>Content of Tab Pane 2</p>
            <p>Content of Tab Pane 2</p>
            <p>Content of Tab Pane 2</p>
          </TabPane>
          <TabPane tab="属性" key="props">

          </TabPane>
          <TabPane tab="样式" key="style">
            <Style
              onStyleChange={this.onStyleChange}
              component={component}
              uid={componentId}
            />
          </TabPane>
          <TabPane tab="数据" key="data">
          </TabPane>
        </Tabs>
      </div>
    );
  }
}
